﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
        .container-row{
            height:100px;
            border: 1px solid red;
            display: flex;
            flex-direction: row;
            /* flex-start这是默认值
             * flex-end右对齐
             * center居中
             * space-between两端对齐
             * space-around两侧项目的间隔相等
             */
            justify-content: flex-start;
            align-items: center;/*这个我理解它的意思是水平方向对齐*/

            /*
             * 所有内容排在一条轴上，上面有direction方向了，根据方向来决定轴。一条轴线如果排不下了如何换行就是里面的值了
             * 对比着学，可以理想成是float左浮，宽度不够了自动往下排并左浮
             * 感觉这个看看就好，默认是nowrap
             * 如果换行的话不同手机换行数可能不一样？当然有这个样式可能有其它用途
             */
            /*flex-wrap: wrap;*/
        }
        .container-column{
            border: 1px solid black;
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <h1>测试一下flex布局</h1>

    <h3>主轴方向是水平方向，起点是左端..其中想右端开始可以row-reverse反转一下就ok</h3>
    <div class="container-row">
        <span>文本内容1</span>
        <span>文本内容2</span>
        <span>文本内容3</span>
    </div>

    <h3>主轴方向是垂直方向，起点是上端..其中想下端开始可以column-reverse反转一下就ok</h3>
    <div class="container-column">
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
    </div>
</body>
</html>